<template>
	<div>
	<!-- 头部 start-->
		<div class="circle">
			<div class="circle_hair">
					<router-link :to="{ path :'/circle' }">
						<span class="cancel">取消</span>
					</router-link>
					<span class="send_circle">发圈子</span>
					<span class="send" @click="hair_send">发送</span>
			</div>
		</div>
		<!-- 头部 end-->
		
		<!-- 内容 start-->
		<div class="circle_hair_content clearfix">
			<div class="center">
				<textarea class="enter" placeholder="想和大家说..."/></textarea>
				<div class="add_img clearfix">
					<div class="demo-upload-list" v-for="item in uploadList">
        <template v-if="item.status === 'finished'">
            <img :src="item.url">
            <div class="demo-upload-list-cover">
                <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
                <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
            </div>
        </template>
        <template v-else>
            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
        </template>
    </div>
    <Upload
        ref="upload"
        :show-upload-list="false"
        :default-file-list="defaultList"
        :on-success="handleSuccess"
        :format="['jpg','jpeg','png']"
        :max-size="2048"
        :on-format-error="handleFormatError"
        :on-exceeded-size="handleMaxSize"
        :before-upload="handleBeforeUpload"
        multiple
        type="drag"
        action="//jsonplaceholder.typicode.com/posts/"
        style="display: inline-block;">
        <div class="update_img">
            <img src="../../../static/images/29-30-34/添加-2.png"/>
        </div>
    </Upload>
    <Modal title="查看图片" v-model="visible">
        <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
    </Modal>
				</div>
			</div>
		</div>
		<!-- 内容 end-->
		
		<!-- 底部 start-->
		<div class="circle_hair_footer">
			<div class="center">
				<div class="top clearfix" @click="hair_gps">
					<div class="left"></div>
					<span>插入位置</span>
					<div class="insert_icon"></div>
				</div>
				<div class="bottom clearfix">
					<div class="left"></div>
					<span>插入录音</span>
				</div>
			</div>
		</div>
		<!-- 底部 end-->
	</div>
</template>

<script>
	import $ from 'jquery'
	export default {
        data () {
            return {
                defaultList: [
                    
                ],
                imgName: '',
                visible: false,
                uploadList: []
            }
        },
        methods: {
        	hair_send(){
        		alert('发送成功');
        		window.location.href = '#/circle'
        	},
        	hair_gps(event){
        		$(".top span").html("三里屯SOHO")
        	},
            handleView (name) {
                this.imgName = name;
                this.visible = true;
            },
            handleRemove (file) {
                // 从 upload 实例删除数据
                const fileList = this.$refs.upload.fileList;
                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
            },
            handleSuccess (res, file) {
                // 因为上传过程为实例，这里模拟添加 url
                file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
                file.name = '7eb99afb9d5f317c912f08b5212fd69a';
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '文件格式不正确',
                    desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '超出文件大小限制',
                    desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
                });
            },
            handleBeforeUpload () {
                const check = this.uploadList.length < 5;
                if (!check) {
                    this.$Notice.warning({
                        title: '最多只能上传 5 张图片。'
                    });
                }
                return check;
            }
        },
        mounted () {
            this.uploadList = this.$refs.upload.fileList;
        }
    }
	
</script>
<style lang="less" scoped>
/* 上传图片  start*/
.demo-upload-list{
    display: inline-block;
    width: 140/64rem;
    height: 140/64rem;
    text-align: center;
    border-radius: 4/64rem;
    background: #fff;
    position: relative;
    box-shadow: 0 1/64rem 1/64rem rgba(0,0,0,.2);
    margin-right:20/64rem;
}

.update_img{
	width:140/64rem;
	height:140/64rem;
	border:0;
}
.ivu-upload-drag:hover{
	border:0;
}
.demo-upload-list img{
    width: 100%;
    height: 100%;
}
.demo-upload-list-cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
}
.demo-upload-list:hover .demo-upload-list-cover{
    display: block;
}
.demo-upload-list-cover i{
    color: #fff;
    font-size: 60/64rem;
    cursor: pointer;
    margin: 0 12/64rem;
}
/* 上传图片  end*/

/* 初始样式  start*/
table{ border-collapse: collapse; border-spacing: 0; }
body,p,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6 { margin: 0; }
input,textarea,select { padding: 0; border: 1px solid #ccc;outline: 0; font-size: 100%; }
i{ font-style: normal; }
b{ font-weight: normal; }
input{ text-indent: 2em; }
ul,ol{ padding-left: 0; list-style: none; }
a{ text-decoration: none; }
a,img{ -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.clearfix:after { content: ""; display: block; height: 0; overflow: hidden; clear: both; }
body{ font-family: "微软雅黑"; font-size:16px; }
/* 初始样式  end*/

/* 内容样式 start*/
.circle_hair_content{
    width:100%;
    background: url(../../../static/images/29-30-34/内容底.png);
    background-size:100%;
    .center{
        width:(640 - (40 * 2)) / 64rem;
        height:100%;
        margin: 30/64rem auto;
        .enter{
            border:none;
            font-size:30/64rem;
            color:#313131;
            width:100%;
            height:250/64rem;
            margin-bottom:30/64rem;
            resize:none;
        }
        .add_img{
            img{
                width:140/64rem;
                height:140/64rem;
                margin-right:20/64rem;
            }
        }
    }
}
/* 内容样式 end*/

/* 头部样式 start */
.circle{
    background: #A54BE8;
    .circle_hair{
        width:600/64rem;
        margin:0 auto;
        height:95/64rem;
        text-align:center;
        line-height:95/64rem;
        .cancel{
            float: left;
            color:#fff;
            font-size:32/64rem;
        }
        .send_circle{
            font-size:35/64rem;
            color:#fff;
        }
        .send{
            float: right;
            font-size:32/64rem;
            color:#fff100;
        }
    }
}
/* 头部样式 end */

/* 底部样式  start*/
.circle_hair_footer{
    background: #F2EEF9;
    height:550/64rem;
    margin-top:32/64rem;
    .center{
        width:(640 - (40 * 2)) / 64rem;
        margin: 0 auto;
        padding-top:30/64rem;
        .top,.bottom{
            width:560/64rem;
            height:80/64rem;
            line-height:80/64rem;
            margin-bottom:20/64rem;
            background: url(../../../static/images/29-30-34/插入按钮条.png) no-repeat;
            background-size: 100%;
            .left{
                width:30/64rem;
                height:100%;
                margin-left:20/64rem;   
                background: url(../../../static/images/29-30-34/1-1.png) center no-repeat;
                background-size: 30/64rem 40/64rem;
                float:left;
            }
            span{
                float: left;
                font-size:26/64rem;
                color:#7b7781;
                padding-left:24/64rem;
            }
            .insert_icon{
                float: right;
                width:18/64rem;
                height:100%;
                background: url(../../../static/images/29-30-34/插入箭头.png) center no-repeat;
                background-size: 100% 28/64rem;
                margin-right:24/64rem;
            }
        }
        .bottom{
            margin-bottom:0;
            background: url(../../../static/images/29-30-34/插入按钮条.png) no-repeat;
            background-size: 100%;
            .left{
                width:25/64rem;
                margin-left:25/64rem;   
                background: url(../../../static/images/29-30-34/2-1.png) center no-repeat;
                background-size: 25/64rem 40/64rem;
            }
        }
    }
}
/* 底部样式 end*/
</style>
